<template>
    <div>
        <div>
            <div style="border-bottom:1px solid #D8DCE5;padding:5px;text-align: left">选择组件</div>
                <div style="height:200px;overflow-y: auto">
                    <el-table
                        ref="unitTable"
                        :data="unitData"
                        :show-header="false"
                        @select="getAllColInfoByUnitId">
                        <el-table-column
                            type="selection">
                        </el-table-column>
                        <el-table-column
                            prop="titleId">
                        </el-table-column>
                    </el-table>
                </div>
        </div>
        <el-divider></el-divider>
        <div>
            <div style="border-bottom:1px solid #D8DCE5;padding:5px;text-align: left;margin-top: -25px;">字段</div>
            <div style="height:200px;overflow-y: auto">
                <el-table
                    ref="multipleTable"
                    :data="fieldData"
                    :show-header="false"
                    style="width: 200px"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection">
                    </el-table-column>
                    <el-table-column
                        prop="comment"
                        width="150px">
                    </el-table-column>
                </el-table>
            </div>

        </div>
    </div>

</template>

<script>
    import ajax from '@api/ajax'
    import {
        GET_PANEL_LIST, GET_FIELD_INFO
    } from '@api/url'

    export default {
        components: {},
        props: {
            boardId: {
                type: String,
                default () {
                    return ''
                }
            },
            status: {
                type: String,
                default () {
                    return 'add'
                }
            },
            tableId: {
                type: String,
                default () {
                    return ''
                }
            },
            selectedData: {
                type: Array,
                default () {
                    return []
                }
            },
            selectedUnit: {
                type: Array,
                default () {
                    return []
                }
            },
            typeId: {
                type: String,
                default () {
                    return ''
                }
            }
        },
        data () {
            return {
                unitData: [],
                fieldData: [],
                checkedData: [],
                editFlag: '0'
            }
        },
        watch: {},
        methods: {
            // 获取组件信息
            getUnitData () {
                let conditions = {}
                conditions.boardId = this.boardId
                conditions.unitType = '1'
                conditions.isTableIdNull = false
                ajax.post(GET_PANEL_LIST, conditions).then(res => {
                    this.unitData = res.data
                }).catch(err => {
                    console.error('加载出错！', err)
                }).finally(() => {
                })
            },
            // 通过组件获取字段信息
            getAllColInfoByUnitId (selection, row) {
                // this.unitData.forEach(item => {
                //     if (data.length !== 0) {
                //         if (item.tableId !== data[[data.length - 1]].tableId) {
                //             this.$refs.unitTable.toggleRowSelection(item)
                //             debugger
                //             this.$http.get(GET_FIELD_INFO + '/' + item.tableId+ '/' +this.typeId).then(response => {
                //                 this.fieldData = response.data.data
                //             }, response => {
                //                 console.log('error')
                //             })
                //             // 将选择的组件数据传出去
                //             this.$emit('SelectionPanel', item)
                //         }
                //     }
                // })
                this.$refs.unitTable.clearSelection()
                if (selection.length === 0) return
                this.$refs.unitTable.toggleRowSelection(row, true)
                this.$http.get(GET_FIELD_INFO + '/' + row.tableId + '/' + this.typeId + '/' + row.unitId).then(response => {
                    this.fieldData = response.data.data
                }, response => {
                    console.log('error+')
                })
                // 将选择的组件数据传出去
                this.$emit('SelectionPanel', row)
            },
            // 字段选择触发事件，将选择的字段传到父组件
            handleSelectionChange (val) {
                debugger
                this.$emit('SelectionChange', val)
            },
            // 初始选择的组件数据
            initiallySelected () {
                debugger
                this.editFlag = '1'
                this.$nextTick(() => {
                    this.unitData.forEach((unitItem, listIndex) => {
                        // 配件列表所有数据
                        if (this.selectedUnit[0] === unitItem.tableId) {
                            this.$refs.unitTable.toggleRowSelection(unitItem)
                            this.$emit('SelectionPanel', unitItem)
                            // this.radio = unitItem
                            // // 将选择的组件数据传出去
                        }
                    })
                })
            },
            // 初始选择的字段数据
            checked () {
                debugger
                this.$nextTick(() => {
                    this.selectedData.forEach((item, index) => { // 选中数据
                        this.fieldData.forEach((listItem, listIndex) => { // 配件列表所有数据
                            if (item.toLowerCase() === listItem.columnName.toLowerCase()) {
                                // 回调 nextTick 数据改变后重绘页面
                                this.$refs.multipleTable.toggleRowSelection(listItem)
                            }
                        })
                    })
                })
            },

            // 关闭页面时重置数据
            close () {
                Object.assign(this.$data, this.$options.data())
            },
            // 初始方法
            init () {
                let conditions = {}
                conditions.boardId = this.boardId
                conditions.unitType = '1'
                conditions.isTableIdNull = false
                ajax.post(GET_PANEL_LIST, conditions).then(res => {
                    debugger
                    this.unitData = res.data
                    this.initiallySelected()
                }).catch(err => {
                    console.error('加载出错！', err)
                }).finally(() => {
                })
                if (this.status === 'edit') {
                    // 获取字段列表
                    this.$http.get(GET_FIELD_INFO + '/' + this.tableId + '/' + this.typeId).then(response => {
                        debugger
                        this.fieldData = response.data.data
                        this.checked()
                    }, response => {
                        console.log('error')
                    })
                }
            }
        }
        // mounted() {
        //     this.unitData = this.selectedUnit
        //     this.fieldData = this.selectedData
        // }

    }
</script>

<style scoped>

</style>
